<!DOCTYPE HTML>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="UTF-8" />

		<title>利用css3径向渐变做一张优惠券</title>

	</head>

	<body>
		<style>
			.demo {
				width: 410px;
			}
			.stamp * {
				padding: 0;
				margin: 0;
				list-style: none;
				font-family: "Microsoft YaHei", 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
			}
			.stamp {
				width: 387px;
				height: 140px;
				padding: 0 10px;
				margin-bottom: 50px;
				position: relative;
				overflow: hidden;
			}
			.stamp:before {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: 10px;
				right: 10px;
				z-index: -1;
			}
			.stamp:after {
				content: '';
				position: absolute;
				left: 10px;
				top: 10px;
				right: 10px;
				bottom: 10px;
				box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
				z-index: -2;
			}
			.stamp i {
				position: absolute;
				left: 20%;
				top: 45px;
				height: 190px;
				width: 390px;
				background-color: rgba(255, 255, 255, .15);
				transform: rotate(-30deg);
			}
			.stamp .par {
				float: left;
				padding: 16px 15px;
				width: 220px;
				border-right: 2px dashed rgba(255, 255, 255, .3);
				text-align: left;
			}
			.stamp .par p {
				color: #fff;
				font-size: 16px;
				line-height: 21px;
			}
			.stamp .par span {
				font-size: 50px;
				color: #fff;
				margin-right: 5px;
				line-height: 65px;
			}
			.stamp .par .sign {
				font-size: 34px;
			}
			.stamp .par sub {
				position: relative;
				top: -5px;
				color: rgba(255, 255, 255, .8);
			}
			.stamp .copy {
				display: inline-block;
				padding: 21px 14px;
				width: 100px;
				vertical-align: text-bottom;
				font-size: 30px;
				color: rgb(255, 255, 255);
				text-align: center;
				line-height: initial;
			}
			.stamp .copy p {
				font-size: 16px;
				margin-top: 15px;
			}
			.stamp01 {
				background: #F39B00;
				background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);
				background-size: 15px 15px;
				background-position: 9px 3px;
			}
			.stamp01:before {
				background-color: #F39B00;
			}
			.stamp02 {
				background: #D24161;
				background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);
				background-size: 15px 15px;
				background-position: 9px 3px;
			}
			.stamp02:before {
				background-color: #D24161;
			}
			.stamp03 {
				background: #7EAB1E;
				background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);
				background-size: 15px 15px;
				background-position: 9px 3px;
			}
			.stamp03:before {
				background-color: #7EAB1E;
			}
			.stamp03 .copy {
				padding: 10px 6px 10px 12px;
				font-size: 24px;
			}
			.stamp03 .copy p {
				font-size: 14px;
				margin-top: 5px;
				margin-bottom: 8px;
			}
			.stamp03 .copy a {
				background-color: #fff;
				color: #333;
				font-size: 14px;
				text-decoration: none;
				padding: 5px 10px;
				border-radius: 3px;
				display: block;
			}
			.stamp04 {
				width: 390px;
				background: #50ADD3;
				background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);
				background-size: 12px 8px;
				background-position: -5px 10px;
			}
			.stamp04:before {
				background-color: #50ADD3;
				left: 5px;
				right: 5px;
			}
			.stamp04 .copy {
				padding: 10px 6px 10px 12px;
				font-size: 24px;
			}
			.stamp04 .copy p {
				font-size: 14px;
				margin-top: 5px;
				margin-bottom: 8px;
			}
			.stamp04 .copy a {
				background-color: #fff;
				color: #333;
				font-size: 14px;
				text-decoration: none;
				padding: 5px 10px;
				border-radius: 3px;
				display: block;
			}
		</style>

		<div class="demo">

			<div class="stamp stamp01">
				<div class="par">
					<p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub>
					<p>订单满100.00元</p>
				</div>
				<div class="copy">副券
					<p>2015-08-13<br>2016-08-13</p>
				</div>
				<i></i>
			</div>

			<div class="stamp stamp02">
				<div class="par">
					<p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub>
					<p>订单满100.00元</p>
				</div>
				<div class="copy">副券
					<p>2015-08-13<br>2016-08-13</p>
				</div>
				<i></i>
			</div>

			<div class="stamp stamp03">
				<div class="par">
					<p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub>
					<p>订单满100.00元</p>
				</div>
				<div class="copy">副券
					<p>2015-08-13<br>2016-08-13</p>
					<a href="#">立即使用</a>
				</div>
				<i></i>
			</div>

			<div class="stamp stamp04">
				<div class="par">
					<p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub>
					<p>订单满100.00元</p>
				</div>
				<div class="copy">副券
					<p>2015-08-13<br>2016-08-13</p>
					<a href="#">立即使用</a>
				</div>
				<i></i>
			</div>
		</div>

	</body>

</html>